<template>
	<view>
		<view v-if="!disabled">
			<view class="segment-title">{{info.homeworkName}}</view>
			<view class="answercard-content">
				<view class="answercard-content-item" v-for="(item,index) in info.subjectList" :key="index" @click="goExamIndex(index)">
					<text class="answercard-content-item-num" 
					:class='[item.selectChoice==null||item.selectChoice==undefined||item.selectChoice.length==0?"":"answercard-content-item-done"]'>{{index+1}}</text>
				</view>
			</view>
		</view>
		<button class="submit-button" :disabled="disabled" @click="submitHomework">交卷并查看结果</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	import {isEmpty} from '@/utils/index.js'
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapState('homeworkStore',[
				'info'
			]),
			disabled() {
				return isEmpty(this.info.subjectList)
			}
		},
		onLoad() {},
		methods: {
			...mapMutations('homeworkStore',['setCurrentIndex']),
			...mapActions('homeworkStore',['submitHomework']),
			/**
			 * 返回答题页，指定某道题
			 * @param {number} index 题目在数组中的索引
			 * @param {number/string} subjectId 题目的id 
			 */
			goExamIndex(index) {
				if(this.curIndex!=index){
					uni.$emit('onSheet',{optionType:'clickIndex'});
					this.setCurrentIndex(index);
				}
				uni.navigateBack()
			}
		},
	}
</script>

<style lang='scss'>
	.segment-title {
		width: 100%;
		padding: 40upx 20upx 20upx;
		font-size: 30upx;
		font-weight: 600;
		color: #333333;
	}

	.answercard {

		&-content {
			margin: 12upx 0;
			padding-bottom: 110upx;

			&-item {
				display: inline-block;
				width: 150upx;
				height: 100upx;
				font-size: 28upx;

				&-num {
					display: block;
					width: 60upx;
					height: 60upx;
					background: #ffffff;
					border-radius: 50%;
					text-align: center;
					line-height: 60upx;
					color: #5ea1f8;
					margin: 20upx 45upx;
					border: solid 1px #5ea1f8;
				}

				&-done {
					background-color: #5ea1f8;
					color: #ffffff;
					border-radius: 50%;
				}
			}
		}
	}

	.submit-button {
		position: fixed;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		bottom: 0;
		background-color: #5ea1f8;
		font-size: 28upx;
		border-radius: 0;
		color: #ffffff;
	}

	uni-button:after {
		border: none;
		border-radius: 0;
	}
</style>
